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Lab 5 Advanced Process Coaches in Process Designer 

In this lab you will learn how to create a user interface in the BPD, called a Coach, along with advanced 
techniques for presenting business data to end users. You will learn how user interfaces are easily and 
quickly generated in Process Designer, along with how multiple screens can be combined with automatic 
activities to enable a screen flow for the end user. 

Overview 

In traditional workflow, when a person is required to perform a task, they are presented with a task list. 
When they select the task they want to work on, most systems present a Web form with the relevant 
business information they require to do their work, along with places where they can add input such as 
comments, approvals, status, or even digital signatures. 


APPLICATION FOR 

VARIABLE UNIVERSAL LIFE INSURANCE 


1. TYPE OF APPLICATION! -y*) 
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k 


This “single form” pattern works well for some cases, but what about when there are several consecutive 
tasks that the same user needs to perform? Or cases where the response to a field in the form dictates 
that a different screen should be shown next? Or cases requiring dynamic content, such as populating 
the values in a drop-down box based on previous user input? A single static form cannot easily perform 
in these use cases. 

To deal with these use cases, WebSphere Process Server had a feature called Page Flows, where a us¬ 
er could perform several consecutive tasks, potentially with service invocations between them. Page 
flows were supported though an API, and enabled in the Business Space widgets. The problem was that 
each of the human tasks required navigation by the process engine, which meant that there were several 
database transactions required to move from one task to the next. Thus, Page Flows were not recom¬ 
mended for high-volume applications. 
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Lombardi had a similar concept called Coaches, where multiple user steps could be combined together 
with a flow of screens (possibly with automatic tasks between them). The concept originated with the 
idea that some workers really know how to get the job done, while others who are newer don't know how 
to work things as well. What if the novice worker could have the expert there, guiding them along 
through their job, “coaching” them to help them do their job? This brought about the concept of Coaches. 


The hiring manager fills out a 
job requisition coadi form, 
requesting to fill either a T^ew T 
or an ’Existing’ 1 position. 


If the requisition is to fill an existing 
position, the hiring manager fills out a 
coach form with the position information. 


■ 

Start 



Q Submit 




The hiring manager reviews 

and confirms the information provided 

before submitting the job requisition. 


While a Coach corresponds with a screen, a Human Task Service can be made up of one or more 
Coaches, optionally with automatic activities, decisions, and other items. In the picture above, the yellow 
boxes are Coach screens, while the blue box is an automatic activity. For every button on a Coach 
screen, there is a flow output that is wired to another activity or event. These activities in the Human 
Task Service guide the user through their work. 

In this lab you will learn how to generate a Human Task Service in IBM BPM v7.5 with a default Coach. 
You will learn how to modify the Coach with different presentation options. You will learn how to add ad¬ 
ditional activities to the Human Task Service to create a flow of screens and automatic activities. And 
you will learn how to play back the Coaches to test them. 


1.1 Creating your first Coach 

Coaches are part of Human Task Services, which can be initiated from a Business Process Definition 
(BPD). A BPD lives inside a Process Application. Begin by creating a new Process Application. 

_1. Create a new Process Application 

_a. In Process Designer, navigate to the Process Center perspective by clicking Process 

Center at the top right. If you do not go to the Process Apps tab, click Process Apps. 

_b. Click Create New Process App. Enter Coaches Lab for the Process App Name and 

COA for the Acronym. Enter a description then click Create. 
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_c. The list of process applications refreshes. On the line for Coaches Lab (COA), click 

Open in Designer. The designer perspective opens. 

2. Create a Business Object to use in the lab 

_a. Hover over Data until you see the + appear. Click +, then click Business Object. The 

New Business Object dialog box appears. 

_b. Enter Request for the name then click Finish. 

_c. In the Parameters area, click Add, then add the following parameters. Remember to click 

Select... to change the type. 


Parameter Name 

Type 

RequestNumber 

Integer 

Name 

String 

Type 

String 


d. Click Ctrl-S to save. Your new Business Object should look as follows: 


« ► * Request 


Business Object 


▼ Common 

Name: 

Modified: 

Documentation: 


Request 

tw_admin (Jul 6, 20114:06:27PM) 


▼ Behavior 

Definition Type: | Complex Structure Type 


B 

▼ Parameters 

# RequestNumber (Integer) 

0 Name (String) 

Add | 

| Remove | 

0 Type (String) 


1 * 1 




Documentation: 


"3 


▼ Parameter Properties 

Name: 

| Type 



Is Ust: 

□ 



Variable Type: 

$> String 

Svstem Data 

| Select... 11 New | 



_e. The Business Object is complete. You can close it by clicking X. 

3. Create a Business Process Definition. 
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_a. Hover over Processes until you see the +. Click +. 

_b. Select Business Process Definition. The New Business Process Definition dialog ap¬ 
pears. 

_c. Change the name to Coach Lab Process, then click Finish. An empty process appears 

in the Process Designer with a Start and End node and 2 swim lanes. 

4. Add variables and tasks to the process 

_a. Click the Variables tab then click Add Private. 

_b. Change the name to requestData then change the Variable Type to Request by clicking 

on Select... and choosing Request from the list. 

_c. Click Diagram to return to the process editor. 

_d. In the palette on the right, click on Activity. Move the cursor to the Participant swimlane, 

in between the Start and End events. Click to drop the new activity into the diagram. 

_e. Change the activity name to Human Task, then use the Sequence Flow tool from the 

palette and wire it to the Start and Stop events. Your process should now look as follows: 



f. Click Esc to return the cursor to Select mode, then click Ctrl-S to save. 


The process is saved to the Process Center, which means you could now execute it, also known as 
playback, to test it. The next task is to implement the Human Service for the Human Task activity. 


5. Generate a new Human Service 

_a. Right-click Human Task and select Activity Wizard- 
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b. In the Activity Wizard - Setup Activity dialog, ensure that Human Service (Service with 
human interaction) is selected. 



c. Ensure that Create a New Service is selected then click Next. 


_d. Since there is only one local variable in the process, it is by default set as the input and 

output of the Human Service. If you had multiple variables, you could select which 
one(s) you want to use. In this case, just click Finish, then Ctrl-S to save. 

6. Explore the generated Human Service 
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a. Double-click Human Task. The Human Service editor opens. 


Tip: although the Business Process Diagram is no longer 
on the screen, it is still open. You can click the pulldown 
arrow to choose any open editor, or move between which 
one is displayed by using the arrow buttons at the top left. 
Clicking X closes the current editor. 




Human Task 


* Coach Lab Process 
Jf' Human Task 


_b. By default, a user interface screen gets generated named Coach. It includes a single 

pushbutton entitled Ok, which is wired to the End event. 



Overview 


Human Task 


Diagram 



Variables Coaches 


Start 



Kj. 

► 

Common 

<£■ 


A 


Coach 


Server Script 


^ Server Scriptiet 

<tt| 


Modify Task 
Postpone Task 
Decision Gateway 

End Event 


o 


c. Note the activities and events in the palette on the right. You can enhance the Human 
Service by adding additional activities. You will do this in a later part of this lab. 
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d. In the diagram, double-click Coach to see the generated screen. 





iE 

- 


Human Task T 

X 


Overview 


Diagram 


Y 1 

Coach 


Variables 



Human Task 


Request Data 


Request Number: 
Name: 

Type: 


tw. I li c el, req u eat D trl ts 


Ok 


G3 Sections co 

° One-Column with Title 
^ One-Column 
Two-Column 
IheJ Three-Column 


& Controls 

B Button Group 
ifziText 
fj| Test Area 
OutputText 
p| Combo Box 

HI List 

ITI Dual List 
Hi| Date Selector 
0 Chedc Box 
[*■ Radio Buttons 




e. Notice that you are now in the Coaches view. To view the diagram again, you would 
click the Diagram tab. Also notice that the palette on the right has changed to different 
sections and controls which you can add to your Coach. Finally, notice that on the left 
you see Coach, which corresponds with the screen you are editing. If you have multiple 
Coaches in a Human Service, you can navigate between the screens by clicking on the 
left, rather than having to go back out to the diagram each time. 


_7. Playback the coach 


_a. To test the coach, click the Run Service button 
_b. A Web browser window appears. In a few moments, the Coach is rendered. 
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c. Note how the coach looks very similar to how it did in the editor. Enter some values then 
click Ok. When prompted if you want to close the window, click Yes. 

d. At the bottom of the Coach editor, click the Preview tab. You are presented with a pre¬ 
view of how the coach looks. Click Design to return to the Design tab. 


_8. It is doubtful that you'd use the generated Coach as is. The next thing we will do is, make modi¬ 
fications. 

_a. With the Human Task Coach showing, ensure you are in the Coaches tab. From the 

Controls palette, drag a Button Group onto the Coach screen, below the Ok button. 
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b. Click on the newly created button and in the Properties tab, click the Presentation sub¬ 
tab. 

c. In the Label field, change the name to Refresh. 

y 4 

d. Click the Diagram tab. Click the Sequence Flow icon 

e. Click on Coach. Move the cursor back onto Coach then click again. 



r - 1 

S 


Start 

Coach 

l _ t j 

i 


5 Refresh 




f. A connection from Coach back to itself is created for the Refresh button functionality. 
Click the Coaches tab again, then Ctrl-S to save the changes. 

g. Click the Run Service button to playback the Coach. A Web browser window opens with 
the updated Coach. There is now a Refresh button as well as the Ok button. 

h. Leave the Web browser window open and return to Process Designer. Click on Human 
Task at the top. In the Properties tab, change the title to Data Input. 
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□ 


r V 1 

* Human Task 

* 1 




Ok 


Refresh 


▼ Common 

Title : 

XSL Transform Override: <Use defaults- 

CSS Override: <Use default:* 

Indude JS File: 


^7 Sections 

|5=1 One-Column with Title 
^One-Column 
Two-Column 
^Three-Column 


(2=!? Controls 

Ql Button Group 
[fljText 
P Text Area 
^□] Output Text 
Q] Combo Box 

H List 

ITI Dual List 
r *\ Date Selector 

PI I 


IS? Variables 

*© requestData 


Select, ., 

New 

Select, ., 

New 


x 

x 


_i. Ctrl-S to save. 

_j. Return to the Web browser window then click the Refresh button. The title section now 

shows Data Input as the label. 



Tip: As you are making modifications to a generated 
Coach, you can use this technique to quickly test out your 
changes, rather than having to Run Service each time, and 
close the web browser window when you're done. Note 
that if you wait too long, your session may time out howev¬ 
er. 


9. Update the Human Service to use multiple Coaches in a flow 
_a. Click on the Diagram tab. 
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b. From the Common palette, drag Coach onto the canvas. Change the name from Untit¬ 
led 1 to Verify Input. 

c. Click the Ok wire between Coach and End. When the wire is selected, a black dot ap¬ 
pears at each end. Drag the target dot onto Verify Input to change the wiring. 


Variables Coaches 





Server Script 
Server Scriptiet 
Modify Task 
Postpone Task 
Decision Gateway 


End Event 


d. Coach is now connected to Verify Input. Use Sequence Flow to connect Verify Input to 
End node. You may want to straighten out the diagram at this point. 



e. Click Coach then click the Coaches tab. Notice that both Coach and Verify Input now 
appear on the left. Click Verify Input to see what it looks like. It is empty because we 
have not yet defined any inputs or outputs. When the Fluman Service was generated, 
this was done on the first Coach by the wizard. This time, we will do it manually. 


Page 14 


Advanced Coaches 



























IBM Software 


f. In Verify Input, from the Variables palette, drag requestData below the Section Title. 
You may have to scroll down to see the Variables palette. 


Human Task 


Overview Diagram Variables I 



A 

Coach 


A 

Verify Input 


IBM BPM Coach 


Section Title 



(25? Sections 

One-Column with Title 
[3=] One-Column 
TwoColumn 
[HEj ThreeColumn 


& Controls 

S Button Group 
^□Text 
0 Text Area 
^□j Output Text 
pi Combo Box 

Bust 

ITI Dual List 
Date Selector 
a i 


o 


l23 Variables] 

=© requestData 


_g. Verify Input now has fields for the data. You could have expanded requestData and 

added just an individual field. 

_h. You may change the title from Section Title to Verify Input. 

_i. You will now add another button for navigation. Click the Ok button to select the button 

group. In the Properties tab, click the Presentation sub-tab. 

_j. Under the Buttons section, click Add to add another button to the Button Group. Change 

the name to Back. 
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* Human Task 


Overview Diagram Variables 


& 

Coach 

& 


Verify Input 



IBM BPM Coach 


Section Title 


Request Data 


Request Number: 
Name: 

Type: 


Design | Preview 


Back 


£5? Sections 

<0 

f^=\ One-Column with Title 

P=1 One-Column 

° Two-Column 

|3=j Three-Column 

IS? Controls 

<0 

Q Button Group 


jDText 


Text Area 


<^g] Output Text 


p| Combo Box 


must 


] Dual List 


Hri Date Selector 


rhRrlfFViv 


IS? Variables 

CO 

-0 requestData 


Properties 


Validation Errors Where Used 


Button Group 
Presentation 
Visibility 
Customization 


▼ Buttons 

Alignment: (Right 


1—3 OK [ButtonGroupO_ButtonO] 
LJBack [ButtonGroupO_Buttonl] 


3 


Add 


Remove 


▼ Button Details 

Button Id: 

Label: 

Is Cancel: 

Create flow: 


| ButtonGroupO_Buttonl 

Change... 

| Back| 



□ 

El 


k. Click the Diagram tab. Use Sequence Flow to connect Verify Input back to Coach. 



Double-click Coach. Select the Ok button. Select Properties, then Presentation. 
Change the name from Ok to Next. 
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_m. Ctrl-S to save the changes, then test out the flow by going back to the Diagram view. 

You can now navigate between the two Coach screens. 

You have now built a simple process flow with two Coaches. In the next section, we will see how to 
make some common modifications to the screens. 


1.2 Modifying Coaches 

In the first section, we saw how to create a simple Coach and how to create a flow between Coach 
Screens. In order for a Coach to be usable, the default screen often needs updates to improve the user 
experience. In this section, we will step through some common techniques for making updates. 


1. Change a field to a static pull-down menu 

_a. In Human Task, navigate to the Coaches tab for Coach, then select the Type field with¬ 
in Request Data. 

_b. In the Properties tab, select the Input Text sub-tab. Change Control Type from Input 

Text to Single Select. 
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* Human Task 


Overview Diagram Variables 


0- 


Coach 


A 

Verify Input 


Data Input 


Request Data 


Request Number: 
Name: 


Type: 


Design Preview 



ES3 


Next 


Refresh 


Sections 

[ 3=3 OneColumn with Til 
[jEj OneColumn 
[ 3=3 Two-Column 
[ 3=3 Three^Column 


[S? Controls 

Q Button Group 
^□Text 
P Text Area 
?□] Output Text 
p| Combo Box 

EH List 

m Dual List 
Date Selector 

123- Variables 

4l-i requestData 


[ 


Properties 


Validation Errors Where Used 


Input TeKt 


Presentation 

Visibility 

Events 

Customization 


▼ Common 

Label Visible: 
Label: 

Documentation: 


El 


Type: 




▼ Behavior 

Control Id: 
Control Type: 
Binding: 

Colspan: 

Rowspan: 


| InputTextZ 

Change... 

jlnputText 

d 

Input Text 

IciutputText , 

pul U Select 


|Boolean 



Page 18 


Advanced Coaches 




























































IBM Software 


c. Click the Presentation sub-tab. In the Manual Data area, enter the following 3 values by 
clicking the Add button 3 times: 


Table 1: Manual Data Values 


Value 

Display Text 

New 

New Request 

Modify 

Modify Existing Request 

Delete 

Delete Existing Request 


You should now see something similar to the following: 


Properties 


Validation Errors 


Where Used 




Single Select » Widget Style ■» Manual Data 


Presentation 


Widget Type: 

[Drop Down List 

"3 

Value 

Display Text 

Add 

Visibility 



Widget is displayed as a drop-down Combo Box 


New 

New Request 

Remove 

Events 


# of Rows: 

1 


Modify 

Modify Existin... 


Customization 

Orientation: 

[Horizontal 

H 

Delete 

Delete Existin... 

Up 








Down 


_d. Ctrl-S to save. 

e. Playback the Coach. You will now see a drop-down list for the Type field. 


Data Input 



f. In the Presentation tab, change Widget Type to Radio Buttons. Save and play back 
the coach. Remember that you can click your Refresh button instead of exiting and re¬ 
starting the Coach. 
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Data Input 

Request Data 

Request Number: o 
Name: 

ype: -O- |\j & w Request ‘ Modify Existing Request Delete Existing Request 

| Next | 
| Refresh | 


_g. Change Orientation from Horizontal to Vertical. Save and play back the Coach. 

_h. Change from Radio Buttons to Multiline List. Save and play back the Coach. As you 

can see, there are a number of options for how to display a Single Select input field. Set 
the Type field to whichever one you prefer, then Save. 

2. Use formatting options for the Request Number field 

_a. Select the Request Number field. In the Properties tab, select the Presentation sub¬ 
tab. 

_b. On the Format line, click Select. From the pop-up menu, select Integer ###,###,###. 

Note the variety of formats available for decimal numbers and currencies. 
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Human Task 


Overview Diagram Variables 


Coaches 



Data Input 


Request Data 


Request Number: 


. Rfcq u-fc&tN u rilihifer 


® New Request (") Modify Existing Request 


Next 


Refresh 


Preview 


Properties 


Input Text 


Validation Errors Where Used 


Presentation 


Visibility 

Events 

Customization 


▼ Widget Style 

# of Rows: |"1 

Format: ^ |~ 

Maximum length: 

▼ Dynamic Type Ahead Binding 

Attached Ajax Service: <none> 


Currency: $ ###,###,###,## 
Currency: ###,###,###.##€ 
Currency: C ###,###,##■#. ## 
| Integer: j 

Decimal : ###,###,### , ## 

US phone: (###) 000-0000 
US SSN: 000-00-0000 


c. Save the Coach. Play back the Coach. Enter a very large number for Request Number, 
such as 1234567890. When you tab to the next field, notice how the formatting is ap¬ 
plied. 
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Data Input 


Request Data 

Request Number: |l,234,567,S90 
Name: |Marc) 

Type: C New Request f Modify Existing Request | f~" Delete Existing Request 

jjJextj 
Refresh | 


_d. In the Presentation sub-tab of Properties, change the commas in the formatting to 

dashes, so that it reads ###-###-###. 

_e. Save and play back the Coach. The data is now presented as 1234-567-890. 

3. Make the Name field required. 

_a. Select the Name field. 

_b. In the Properties tab, select the Visibility sub-tab. 

_c. Select the checkbox for Override Parent Visibility, and then change Default Visibility to 

Required (full access) for everyone. 
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A 

Coach 


Data Input 


A 

Verify Input 



Request Data 


Request Number: 


Properties 


Design | Preview | 


Validation Errors Where Used 


Input Text 
Presentation 
Visibility 
Events 

Customization 


▼ Visibility 

Override Parent Visibility: 
Default Visibility: 

Override Default: 



Remove 


Custom Script 


d. Save and playback the coach. 
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Data Input 



e. Notice that Name is now displayed in red with an asterisk (combination of color and visu¬ 
al indicators) to indicate a required field. Keep the Name field blank, and click Next. You 
are warned that the field must have a value. 


Using the Visibility tab, you can control fields to make the read-only, hidden, required, or editable (the 
default). 


4. Make a field read-only, depending on the value of another field. In this example, you will make 
Request Number editable only when it is a new request. 

_a. Select the Request Number field. In the Properties tab, select the Visibility sub-tab. 

_b. Select the check-box for Override Parent Visibility and then click Depends on Control. 


Properties 


Validation Errors 


Where Used 


Input Text 
Presentation 
Visibility 
Events 

Customization 


▼ Visibility 

Override Parent Visibility: 
Default Visibility: 

Override Default: 


El 

Editable (full access) for everyone 

Depends on control{InputText2) 

Remove 

Custom Script 



Depends on Control 



Depends on Group 




Page 24 


Advanced Coaches 























































IBM Software 


c. An input section appears towards the right of the screen, called Control Dependent Vis¬ 
ibility. Depending on your screen resolution, you may need to pan to the right to see this 
area. In the Control Dependent Visibility section: 

_i. Set Visibility to Disabled (read only access). This will make the field read only 

when a certain condition is true. 

_ii. Set Control to Type (lnputText2). This is the field whose value will be checked. 

_iii. Set Operator to !=. This means “not equal”. 

_iv. Set Value to “New”. Don't forget the double quotes. All together, this means 

that you want the field to be read-only when Type is not equal to “New”. 



Validation Errors Where Used 


Visibility 


Events 

Customization 


access) for everyone 


on control(InputTextZ) 


3 


Custom Script 


Depends on Control 


Depends on Group 


~E\ 


▼ Control Dependent Visibility 

Visibility: 

Control: 

Operator: 

Value: 


Disabled (read only access) 

- 3 

Type: (InputTextZ) 

- 3 

! = 

m 

1 w New n | 

-IT 

2 d 

———nr 1 


J3 


d. Save and playback the Coach. 

e. After entering data, select the Type as Modify Existing Request. Note, the Request 
Number field becomes gray in color, and cannot be edited. 


Request Data 


Request Number 


1234 - 567-590 


Name:* [ware 

Type: New Request t* Modify Existing Request Delete Existing Request 


Also note that you can add a condition for Depends on Group. In this case, the visibility or edit capability 
of a field could depend on which group you belong to. For example, you could have a field that only a 
manager or administrator could modify. 
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.5. Change the Diagram flow 


a. Click the Diagram tab. 


b. Drag a Coach from the Common palette out to the canvas. Rename it to Show Instruc¬ 
tions. 



c. Drag a Decision Gateway from the palette onto the diagram. Change its name to New 

Request? 

d. Highlight and move the wire labeled Next from Coach to the Decision Gateway - New 

Request?. 


I OK- 


O 


New 

Request? 


2 

Show 

Instructions 


e. Use the Sequence Flow tool to connect the Decision Gateway to Verify Input. 


Page 26 


Advanced Coaches 








































IBM Software 


f. Add another connection from New Request? to Show Instructions. 

g. Connect Show Instructions to Verify Input. 



O 


h. Select the New Request? Decision gateway. In the Properties tab, select Implemen¬ 
tation. 


Properties 


Validation Errors 


Where Used 


Step 

Implementation 
Pre & Post 


▼ Decisions 

Untitied Show Instructions ) 

Unfitted ^Verify Input) 



Default Line 


♦ 0 
o o 


The decisions that are listed will be evaluated in order, top to bottom. The arrow keys at the right can be 
used to change the evaluation order. Untitled (Verify Input) is set as the default; if none of the other con¬ 
ditions are true, this is the path that will be followed. We will now set up the logic for the first decision in 
the list. 


Click Untitled (Show Instructions). The path this decision will take is highlighted in the 
diagram. Click on the link in the diagram. In the Properties view change the name to 
New, then select the Name Visible checkbox. 
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Overview 


I Variables Coaches 



- B OK- 


o 

End 


►4 


£5 Common 

Coadi 



Properties 


Validation Errors Where Used 


▼ Common 

Name: 

u _ . 


| New| 


_j. Click on the link from New Request? to Verify Input. Change its name to Existing, and 

select the Name Visible checkbox. 

_k. Click on New Request? again, then select the Implementation tab. Note that the 

names are now updated to reflect the names of the lines. It is a good practice to name 
your lines when using a decision, so it is easier to understand which line goes to which 
task. 
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O 


Click the selection icon to select a variable. Expand Input, expand requestData 
(Request), and select Type (String). 


3 Local 

late) input 

R *© requestData '[Request) 

® RequestNumber -[Integer) 
Name (String) 


Type (String) 


(HI -0- Output 

0-0 requestData [Request) 
© Private 
iil Localization Resources 


m. In the drop-down list that shows NONE, select == for the operator. This means “equals”. 

n. In the last field, enter “New”. Don't forget the double quotes. 


▼ Decisions 


New fShow Instructions,- 

Existing fVerify Input.- 


tw.local.requestData.Type iilF 7 rJ r "New* 
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_o. Click Ctrl-S to save. If the request is “New”, the decision will flow to the Show Instruc¬ 
tions Coach. Otherwise, it will flow to Verify Input. 

_p. Playback the diagram to test it out. Enter a request number and a name. Make sure to 

select New Request as the type and then click Next. You should navigate to the Show 
Instructions Coach, which is currently empty, other than the OK button. Click OK. 

_q. At the Verify Input Coach screen, click Back. You are returned to the first Coach, since 

this is how you wired it. 

_r. Change Type to Modify Existing Request and then click Next. 

_s. This time, you navigate directly to the Verify Input Coach. 

As you can see from this example, you can create a flow between Coach screens based on the values 
entered by the user, or by automatic activities. In the next section, you will see how to add an automatic 
activity dynamically populating a drop-down menu with options. 


.6. Crate a dynamically populated drop-down list in a Coach. 

_a. In Human Task, click the Variables tab and then click Add Private. 

_b. Change the name to MenuOptions, then click the checkbox is List. 


▼ Variables 


□ I* 1 Variables 
□ Local 

B ■© Input 

B =0 requestData {Request) 

© RequestWumber (Integer) 

© Name (String) 

© Type (String) 

B 0 Output 

B 0- requestData (Request) 

© RequestWumber (Integer) 

© Name (String) 

© Type (String) 

B © Private 

Add Private 

Add Input 

Add Output 

Link Epv 

Link Localization 

Remove 

Move Up 

Move Down 

© MenuOptions (String) (List) 


Exposed Process Variables 

HP Localization Resources 



▼ Details 



c. For Variable Type, click New. For the name, enter NameValue and then click Finish. 

d. Under Parameters, click Add. Change the name to name. Leave the type as String. 
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_e. Under Parameters, click Add again. Change the name to value. Leave the type as 
String. 


Business Object 


^ Common 

Name; NameValue 

Modified: tw_admin (Jul 7, 2011 3:47:53 PM) 

Documentation: 


▼ Behavior 

Definition Type: |Complex Structure Type 



▼ Parameters 


© name (String) 


© value (String) 





Add 


Parameter Properties 

| value 


Remove 


Up 


Down 


Name: 

Is List: 

Variable Type: 


Documentation: 







_f. Click Ctrl-S to save, then click X to close NameValue. 

_g. Under Default Value, check the box Has Default. 

_h. Click Ctrl-S to save changes to MenuOptions. Click the Diagram tab. 

_i. From the common palette on the right, drag and drop Server Script onto the diagram. 

Change the name to Populate List Data. 

_j. Connect the Start node to Populate List Data and then connect the Populate List Data 

activity to Coach. 
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In a real process application you might use SQL to get items from a database or call a Web service to 
retrieve business data from some other system. Or you might calculate values using Java or Javascript. 
In this case, we will just set the values using pre and post assignments, so that we don't require another 
system to interact with. 


_k. Select Populate List Data. In the Properties tab, select Pre and Post. 

_I. The left-hand side represents things to do before the task runs (pre). The right-hand side 

represents things to do after the task runs (post). Before you can use a complex varia¬ 
ble, it must be initialized. In the Pre-execution Assignments area, type in the following. 
(Note: you can also use content assist by clicking Ctrl-Space to select items off a list, ra¬ 
ther than typing it all in). 

Listing 1. Pre-assignments 

tw.local.MenuOptions[0] =new tw.object.NameValue() 
tw.local.MenuOptions[1] =new tw.object.NameValue() 


_m. In the Post-execution Assignments area, type in the following, or use content assist: 

Listing 2. Post-assignments 

tw.local.MenuOptions[0]. name="New" 

tw.local.MenuOptions[0] .value="New Request" 

tw.local.MenuOptions[1].name=" Existing" 

tw.local.MenuOptions[1]. value="Existing Request" 

Just as before, there is a name to be displayed, as well as a value to be set. All that remains now is to 
set up the Coach to use this array of values rather than the static ones from before. 
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n. In the diagram, double-click Coach, or select the Coaches tab. Select Coach and then 
highlight Type. 

o. Select the Properties tab, then the Presentation sub-tab. 

p. Change the Widget Type to Drop Down list. 

q. For the three existing values in Manual Data, select each one then click Remove. 

r. Click Add to add a new entry in Manual Data. For Value, use Select one. For Value 
use -Select one of the following--. 



A 

Coach 

s 


Show Instructions 

A 

Verify Input 


Data Input 


Request Data 


Request Number: 
Name: 


Type: 


--Select one of the following— 


Next 


Refresh 


Design | Preview 


& Sections 

[HE] One-Column with Ti 
[HE] One-Column 
[HE] Two-Column 
[HE] ThreeColumn 


(S' Controls 

S Button Group 
[£□ Text 
H Text Area 
Output Text 
3 Combo Box 
H List 
m Dual List 


& Variables 

-© requestData 
0 MenuOptions 


Properties 


Validation Errors Where Used 


zi 


Single Select 
Presentation 
Visibility 
Events 

Customization 


▼ Widget Style ▼ Manual Data 


Widget Type: 

(Drop Down List 

H 

Value 

Display Text 

Widget is displayed as a drop-down Combo Box 


Select one 

—Select one 0... 

# of Rows: 

1 




Orientation: 

[Horizontal 

"1 









Add 


Remove 


Up 


Down 


s. Scroll to the bottom of the Properties area. At the bottom right in the Dynamic Data ar¬ 
ea, set Based on to List Variable. 

t. For Dynamic Binding, click Select, and select Private > MenuOptions (NameValue) 
(List). 
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u. For Dynamic Binding Value, select Private > MenuOptions (NameValue) (List) > 
name (String). 



v. For Dynamic Binding Display, select Private > MenuOptions (NameValue) (List) > 
value (String). 

_w. Click Ctrl-S to save. 

x. Click the Diagram tab and then playback the diagram. The coach displays. 

_y. Select the pulldown for Type. The static text you entered is displayed at the top, followed 
by the dynamic data from the list variable. 


Data Input 



In this section, you learned how a list can be populated with dynamic data. In a real-world system, you 
might have a step where the user enters a customer number. A service might be invoked to look up a list 
of orders for that customer, which is then displayed on the next screen. This technique enables a flexi¬ 
ble, dynamic user interface. 


7. Add custom HTML to a coach. 
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At runtime, a coach is transformed to HTML for rendering. If you'd like to add your own HTML code to a 
Coach, you can do so by using one of the controls in the palette. 

_a. Double-click Coach to edit it, or from the Coaches tab, select Coach. 

_b. In the palette, scroll down in the Controls area until you see Custom HTML. Drag and 

drop Custom HTML onto the Coach, below the Request Data area. 



- 

Coach 

a 


Data Input 


(25? Sections <co 

One-Column with Title 
One-Column 
He] Two-Column 
H=] Three-Column 


Show Instructions 


Request Number: 


a 

Verify Input 


Name: 


Type: --Select one of the following-- 


V 



[ Refresh j 


& Controls 

(p Radio Buttons 
H Table 
?□] Label 

■— ,[M1 Custom HTML 
[J^j Report 

\¥\ Document Attachment 

Wsrishlpt: ;Y'i 


c. Select the new control, and click the Properties tab, then the Presentation sub-tab. 

d. In pace of the default “<p>Some example HTML</p>”, enter the following. 


Listing 3. Custom HTML 

<# if (tw.local.requestData.Name.length ==0) { #> 

<span style ="color:red;font-weight:bold"> 

Name not entered yet 
</span> 

<# } #> 
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Overview Diagram Variables 


£ 

Coach 

£ 

Instruc 

a 


Show Instructions 


Verify Input 


Data Input 


Request Data 


Request Number: 

Name: 

Type: --Select one of the following— 


Refresh 


Design | Preview 


Properties 


Validation Errors Where Used 


Qa? Sections <0 

^ One-Column with Title 
^One-Column 
Two-Column 
“ Three-Column 


O? Controls 
0 Check Box 
t? Radio Buttons 
Si Table 
^S] Label 
[Ml Custom HTML 
II Report 

[¥] Document Attachment 


Variables 
e© requestData 
© MenuOptions 


Custom HTML 
Presentation 
Visibility 


▼ Custom HTML 


HTML: 


1<# if (tw. local. requestData .Name . length =0) { #> 

2 <span style = rr colGr : red; font-weight :bold w > 

Name mot entered yet 

4 -t x / -=IT-| .=1 T' V 


IT 


_e. Save then play back the Coach. The message is displayed. 

Data Input 



f. Continue through the Coach flow. When you reach the Verify Input Coach, select the 
Back button. The next time Coach is rendered, the display line does not show. 
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Using this technique you can add any HTML to your coach, enabling you to create highly customized us¬ 
er interfaces leveraging the power of the HTML language. 

8. Use CSS Override on a Coach 


A Cascading Style Sheet (CSS) is used to give Web sites a consistent look and feel. Coaches use a de¬ 
fault CSS, which you can override. There are a few alternatives provided to you as a default, or you can 
create your own. To understand the impact of a CSS, do the following. 


_a. Play back your first coach, and make note of how it looks. 


Data Input 


Request Data 

Request Number: |—u 


Name:* |~ 

Type: | —Select one of the following- 


~3 


Name not entered yet 


Next I 
Refresh 


b. Edit Coach. In the Properties tab, for CSS Override, click Select. 


Properties 


Coach 

CSS 


Validation Errors Where Used 




zi 

▼ Common 





Title: 

^ | Data Input 




XSL Transform Override: 

<Use default> 

Select,., 

New 

X 

| CSS Override: | 

<Use default> 

Select,., 

New 

X 

Indude JS File: 




.9. Select coach_designer_base.css, then Ctrl-S to save. Play back the coach. 
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The look and feel is much different now, because a different CSS was used. You can import your own 
by clicking New, or you can override specific CSS properties. 

In addition, you can use dynamic CSS to override the defaults based on conditions. For example, num¬ 
bers over 1000 might be displayed in red instead of the default black. 

Any of these modifications you make work for Coaches, whether you call them from the Process Design¬ 
er, Process Portal, or the task Widget in Business Space. 


1.3 Summary 

In this lab you learned about Coaches. You learned how these process coaches can be used as the us¬ 
er interface for Human Services in a BPMN process. You learned how to modify them to customize the 
inputs and outputs. You learned how to combine several coaches into a flow, and how to add logic. You 
learned how you can have automatic activities along with the Coach screens. And you learned how you 
can use HTML and CSS to modify the Coaches. 
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